<template>
  <div class="musicPlay">
    <audio
      ref="audio"
      @play="playFunc"
      @pause="pauseFunc"
      @timeupdate="timeupdateFunc"
      @canplay="canplayFunc"
      @error="errorFunc"
    >
      <source :src="url" type="audio/mpeg" />
    </audio>
    <div class="audioControl">
      <div class="errorMask" v-show="isError">{{ errorMsg }}</div>
      <p>{{ audioName || musicName }}</p>
      <div
        style="display: flex; align-items: center"
        @mousedown="isDraging = true"
        @mouseup="isDraging = false"
      >
        <el-slider
          v-model="playProcess"
          class="sliderClass"
          style="width: 95%"
          @change="setProcessFunc"
          :show-tooltip="showTooltip"
          :format-tooltip="formatTooltip"
        ></el-slider>
        <div style="color: white; width: 120px; text-align: right">
          {{ formatCurrentTime }} / {{ formatDuration }}
        </div>
      </div>
      <div class="playControl">
        <!-- <span class="audioSpan" @click="clickFunc('backward')"
          ><i class="fa fa-backward" aria-hidden="true"></i
        ></span> -->
        <span class="audioSpan" @click="clickFunc('play')" v-show="!isPlaying"
          ><i class="fa fa-play-circle-o audioIcon" aria-hidden="true"></i
        ></span>
        <span class="audioSpan" @click="clickFunc('pause')" v-show="isPlaying"
          ><i class="fa fa fa-pause-circle-o audioIcon" aria-hidden="true"></i
        ></span>
        <!-- <span class="audioSpan" @click="clickFunc('forward')"
          ><i class="fa fa-forward" aria-hidden="true"></i
        ></span> -->
        <span class="audioSpan" @click="clickFunc('refresh')"
          ><i class="fa fa-refresh" aria-hidden="true"></i
        ></span>
        <!-- <span class="audioSpan" style="width: 50px">
          <span class="speed">X {{ playSpeed | fmtPlaySpeed() }}</span>
        </span> -->
        <span class="audioVolSpan"
          ><i class="fa fa-volume-up volume" aria-hidden="true"></i
        ></span>
        <el-slider
          v-model="playVolume"
          class="sliderVolumClass"
          :format-tooltip="formatTooltipVol"
          @change="setVolumeFunc"
        ></el-slider>
      </div>
    </div>
  </div>
</template>
<script>
function toStringFunc(param) {
  if (param > 9) {
    return param + "";
  } else {
    return "0" + param;
  }
}
export default {
  name: "audios",
  props: {
    url: {
      required: true,
    },
    audioName: {
      default: "",
    },
  },
  data() {
    return {
      musicUrl: this.url,
      isPlaying: false,
      isError: false,
      playProcess: 0,
      playVolume: 50,
      playSpeed: 1,
      totalTimes: "00:00",
      currentTime: "00:00",
      musicName: "未知音频格式文件",
      errorMsg: "音频加载失败，无法播放！",
      isDraging: false,
      watchMaxTime: 0,
      showTooltip: true,
    };
  },
  filters: {
    fmtPlaySpeed(pSpeed) {
      return pSpeed.toFixed(1);
    },
  },
  computed: {
    formatDuration() {
      if (typeof this.totalTimes == "number") {
        let fTotal = Math.floor(this.totalTimes);
        let tempMin = Math.floor(fTotal / 60);
        let tempSec = fTotal % 60;
        let min, sec;
        return `${toStringFunc(tempMin)}:${toStringFunc(tempSec)}`;
      }
      return "00:00";
    },
    formatCurrentTime() {
      if (typeof this.currentTime == "number") {
        let fTotal = Math.floor(this.currentTime);
        let tempMin = Math.floor(fTotal / 60);
        let tempSec = fTotal % 60;
        let min, sec;
        return `${toStringFunc(tempMin)}:${toStringFunc(tempSec)}`;
      }
      return "00:00";
    },
  },
  methods: {
    mousedownFunc() {
      this.isDraging = true;
    },
    mouseupFunc() {
      this.isDraging = false;
    },
    formatTooltip(val) {
      let currTime = Math.floor((val / 100) * this.totalTimes);
      let tempMin = Math.floor(currTime / 60);
      let tempSec = currTime % 60;
      let min, sec;
      return `${toStringFunc(tempMin)}:${toStringFunc(tempSec)}`;
    },
    formatTooltipVol(vol) {
      return Math.round(((vol * 2) / 100) * 10) / 10;
    },
    clickFunc(val) {
      if (val == "play") {
        this.isPlaying = !this.isPlaying;
        this.$refs.audio.play();
      } else if (val == "pause") {
        this.isPlaying = !this.isPlaying;
        this.$refs.audio.pause();
      } else if (val == "backward") {
        //减慢音频播放速度，速率范围[0.5，2]
        if (this.playSpeed > 0.5) {
          this.playSpeed -= 0.5;
          this.$refs.audio.playbackRate = this.playSpeed;
        }
      } else if (val == "forward") {
        //加快音频播放速度，速率范围[0.5，2]
        if (this.playSpeed < 2) {
          this.playSpeed += 0.5;
          this.$refs.audio.playbackRate = this.playSpeed;
        }
      } else if (val == "refresh") {
        this.$refs.audio.playbackRate = 1;
        this.playSpeed = 1;
        this.$refs.audio.load();
        this.$refs.audio.play();
      }
    },
    setProcessFunc(val) {
      this.$refs.audio.currentTime = Math.round((val / 100) * this.totalTimes);
      if (this.$refs.audio.currentTime > this.watchMaxTime) {
        this.$refs.audio.currentTime = this.watchMaxTime;
        this.playProcess =
          (this.$refs.audio.currentTime / this.totalTimes) * 100;
        this.currentTime = this.$refs.audio.currentTime;
        this.showTooltip = false;
      } else {
        this.showTooltip = true;
      }
      this.$refs.audio.play();
    },
    setVolumeFunc(vol) {
      //设置播放音量，audio音量范围[0,1]
      this.$refs.audio.volume = Math.round((vol / 100) * 10) / 10;
    },
    playFunc(e) {
      // console.log("music is playing");
      this.isPlaying = true;
    },
    pauseFunc(e) {
      // console.log("music is paused");
      this.isPlaying = false;
    },
    timeupdateFunc(e) {
      if (!this.isDraging) {
        this.playProcess = (e.target.currentTime / this.totalTimes) * 100;
        this.currentTime = e.target.currentTime;
        setTimeout(() => {
          if (this.currentTime > this.watchMaxTime) {
            this.watchMaxTime = this.currentTime;
          }
        }, 50);
      }
    },
    canplayFunc(e) {
      // console.log("music can be played");
      this.isError = false;
      this.$refs.audio.volume = 0.5;
      this.totalTimes = e.target.duration;
      let lastIndex = this.musicUrl.lastIndexOf("/");
      this.musicName = this.musicUrl.substr(lastIndex + 1);
    },
    errorFunc(e) {
      // console.log("music load error!");
      this.isError = true;
    },
  },
};
</script>
<style scoped lang='scss'>
.musicPlay {
  display: flex;
  justify-content: center;
  .sliderClass,
  .audioControl {
    position: relative;
    >>> .el-slider__runway {
      height: 4px;
      >>> .el-slider__bar {
        height: 4px;
      }
    }
    >>> .el-slider__button-wrapper {
      height: 2rem;
      width: 2rem;
      top: -0.8rem;
      >>> .el-slider__button {
        width: 1.2rem;
        height: 1.2rem;
      }
    }
  }

  .audioControl {
    width: 700px;
    height: 250px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 2px;
    padding: 30px;
    .errorMask {
      color: #e6a23c;
      text-align: center;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
    }
    p {
      color: white;
      margin: 30px 0;
    }
    .playControl {
      display: flex;
      align-items: center;
      user-select: none;
      margin-top: 30px;

      .audioSpan,
      .audioVolSpan {
        color: white;
        font-size: 20px;
        margin-right: 30px;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
        .audioIcon {
          font-size: 28px;
        }
        .speed {
          font-size: 16px;
        }
        .volume {
          font-size: 18px;
        }
      }
      .audioVolSpan {
        margin-right: 10px;
        margin-left: 32%;
      }
      .sliderVolumClass {
        display: inline-block;
        width: 25%;
        .el-slider__runway {
          margin: 0;
        }
      }
    }
  }
}
</style>